import styles from './index.module.scss'
import { NavBar, Popup, TextArea } from 'antd-mobile'
import { useState } from 'react'
import { useAppDispatch } from '@/store/hook'
import { addCommentAction, addReCommentAction } from '@/store/reducers/article'
import { Comment, TAtilcleInfo } from '@/api'
type Props = {
  // 评论的作者的名字
  name?: string
  visible: boolean
  close?: () => void
  articleInfo?: TAtilcleInfo
  source?:Comment
}
export default function CommentInput ({
  name,
  visible,
  close,
  articleInfo,
  source
}: Props) {
  const dispatch = useAppDispatch()
  const [value, setValue] = useState('')
  // 绑定给文本域的事件
  const onChange = (value: string) => {
    setValue(value)
  }
  // 点击发表
  const submitCom =async () => {
    if (value) {
      // 评论
      if(source?.com_id){
       await dispatch(addReCommentAction({
        target: source!.com_id,
        content: value
      }))
      }else{
        // 文章
        await  dispatch(
          addCommentAction({
            target: articleInfo!.art_id,
            content: value
          })
        )
      }
      close!()
    }
  }
  return (
    <Popup visible={visible} onMaskClick={close}>
      <div className={styles.root}>
        <NavBar
          right={
            <span className='publish' onClick={submitCom}>
              发表
            </span>
          }
          onBack={close}
        >
          {source?.aut_name ? '回复评论' : '评论文章'}
        </NavBar>
        <div className='input-area'>
          {/* 回复别人的评论时显示：@某某 */}
          {name && <div className='at'>@{name}:</div>}

          {/* 评论内容输入框 */}
          <TextArea
            value={value}
            onChange={onChange}
            placeholder='说点什么~'
            rows={10}
          />
        </div>
      </div>
    </Popup>
  )
}
